<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"  
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>
            <h:outputText value="Sistema de Seguridad de Aplicaiones - SSA" />
        </title>
    </h:head>
    <h:body>
        <ui:composition template="/WEB-INF/facelets/templates/mainLayout.xhtml">            
            <ui:define name="menuPrincipal">
                <ui:include src="/frmMenu.xhtml"/>
            </ui:define>
             <ui:define name="content" >
                 
                 <p:blockUI block=":frmAsignarPerfil:panPerfiles" widgetVar="blkPanel" >
                    Espere mientras se cargan los datos<br /> 
                    <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
                </p:blockUI>
                <p:blockUI block=":frmAsignarPerfil:panPerfilesPersonaliza" widgetVar="blkPanelPerso" >
                    <br /> 
                    <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
                </p:blockUI>
                 <h:form id="frmAsignarPerfil" onkeypress="if (event.keyCode == 13) return false;">
                     <p:panel header="Asignar Perfil" >
                         <table style="width:100%;" >
                            <thead>
                                <tr>
                                    <td>
                                        <table width="100%" cellpadding="5" cellspacing="8" style="width: 500px;">
                                            <tr>
                                                <td><h:outputText value="Usuario :"/> </td>
                                                <td>
                                                    <p:inputText id="usuario" value="#{loginController.STerritorial}" style="width: 240px;" maxlength="255">
                                                    </p:inputText>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </thead>  
                            <tbody>
                                <tr>
                                    <td>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="height: 400px; overflow-y: auto;overflow-x:hidden;float: left;">
                                            <p:tree id="docTree" value="#{loginController.root}" var="per" style="width: 400px;" 
                                                    onNodeClick="blkPanel.show();blkPanel.hide();" dynamic="true" cache="false" selectionMode="single" > 
                                                <p:treeNode expandedIcon="ui-icon-folder-open"  
                                                        collapsedIcon="ui-icon-folder-collapsed" >  
                                                    <h:outputText value="#{per}" />  
                                                </p:treeNode>  
                                            </p:tree>
                                        </div>
                                        <div style="float: left;width: 700px;height: 340px">
                                            <p:panel id="panPerfiles" style="float: left;width: 450px;height: 330px;">
                                                <p:pickList id="pickList" value="#{loginController.perfiles}" var="city"   
                                                            itemLabel="#{city}" itemValue="#{city}">
                                                <f:facet name="sourceCaption">Perfiles Disponibles</f:facet>  
                                                <f:facet name="targetCaption">Perfiles Asignados</f:facet>
                                                <p:ajax event="transfer" oncomplete="blkPanelPerso.hide()" onstart="blkPanelPerso.show()" />  
                                                </p:pickList>
                                            </p:panel>
                                            <p:panel id="panPerfilesPersonaliza" style="float: left;width: 100px;height: 300px;padding-top: 30px;">
                                                <p:commandLink value="Personalizar" onclick="window.location='DetallePerfil.jsf'" ></p:commandLink>
                                            </p:panel>
                                            
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                     </p:panel>
                 </h:form>
                     
             </ui:define>
        </ui:composition>
    </h:body>
</html>